// 商品详情页
import React from "react";
import { Swiper, Image } from 'react-vant';
import style from './product.module.css'
import { ActionBar } from 'react-vant';
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import { useNavigate } from "react-router-dom";
const productDetails = () =>{
  const navigate = useNavigate()  
  const images = [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
        'https://img.yzcdn.cn/vant/apple-3.jpg',
      ]
  const handelShop = () =>{
    navigate('/shop')
  }

    return<>

      <Swiper >
        {images.map((image) => (
          <Swiper.Item key={image}  >
            <Image lazyload  src={image} style={{height:'300px',with:'100%'}} />
          </Swiper.Item>
        ))}
      </Swiper>
      <hr />
      <div className={style.size}>
        <h2 style={{color:'red',padding:'0px',margin:'0px'}}>￥560.00</h2>
        <span>本产品是用于测试</span><br></br>
        <span className={style.fontsi}>自动发货</span>
        
      </div>
        <p style={{width:'100%',height:'3px',background:'gray'}}></p>
        <div>
            <div className={style.box}></div><h2 style={{display:'inline-block'}}>子墨买花店</h2>
            <span className={style.shop} onClick={()=>handelShop()} >进店瞅瞅 👀</span>
            <div className={style.box1}>
                <p>描述相符<br></br><span style={{color:'red',position:'relative',left:'12px'}}>2.1</span></p>
                <p>服务态度<br></br><span style={{color:'red',position:'relative',left:'12px'}}>1.1</span></p>
                <p>发货速度<br></br><span style={{color:'red',position:'relative',left:'12px'}}>4.5</span></p>
                <p>综合评分<br></br><span style={{color:'red',position:'relative',left:'12px'}}>3.2</span></p>
            </div>
        </div>
        <p style={{width:'100%',height:'3px',background:'gray'}}></p>


      <h4> <span style={{ display:'inline-flex', width:'12px',height:'24px',top:'12px', backgroundColor:'gray' }}></span> 商店信息</h4>

      
      <ActionBar>
        <ActionBar.Icon icon={<ChatO />} badge={{ dot: false }} text='客服' onClick={()=>navigate('/Zin/information')} />

        <ActionBar.Icon icon={<ShopO />} badge={{ content: '' }} text='店铺' />
        <ActionBar.Button type='warning' text='加入购物车' />
        <ActionBar.Button type='danger' text='立即购买' onClick={()=>navigate('/payment')} />
      </ActionBar>
    


    </>
}

export default productDetails